<template>
  <el-form :inline="true" :model="formData" class="demo-form-inline">
    <el-form-item label="场所">
      <el-select v-model="formData.venueId" class="m-2" placeholder="Select" @change="callPersonApi">
        <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item.id"/>
      </el-select>
    </el-form-item>
    <el-form-item label="人员名">
      <el-input v-model="formData.name" placeholder="请输入人员名关键字"/>
    </el-form-item>
    <el-form-item label="手机号">
      <el-input v-model="formData.phone" placeholder="请输入手机号关键字"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="callPersonApi">查询</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column fixed prop="id" label="身份证号" width="200"/>
    <el-table-column fixed prop="name" label="姓名" width="120"/>
    <el-table-column fixed prop="phone" label="手机号" width="120"/>
    <el-table-column fixed prop="faceFlag" label="采集" width="120" sortable>
      <template #default="scope">
        <el-tag v-if="scope.row.faceFlag ===0" type="danger">未采集</el-tag>
        <el-tag v-else type="success">已采集</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="门牌号" width="200"/>
    <el-table-column fixed="right" label="操作" width="230">
      <template #default="scope">
        <el-button type="success" size="small" @click="handleClick(scope.row)">采集</el-button>
        <el-button link type="primary" size="small" @click="edit(scope.row)">编辑</el-button>
        <el-button link type="primary" size="small" @click="handleDel(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination background layout="prev, pager, next" :total="pageInfo.total" :page-size="pageInfo.pageSize"
                 style="margin-top: 10px" @current-change="pageChange"/>
</template>

<script setup lang="ts">
import {onMounted, ref, reactive} from 'vue'
import {personApi, venueApi} from "@/api/index"
import {useRouter} from 'vue-router'
import {ElMessageBox, ElMessage} from "element-plus"

const router = useRouter() //页面跳转
const options = ref([{id: 0, name: '请选择'}])
const tableData = ref([])
const formData = reactive({
  name: "",
  venueId: 0,
  phone: ''
})
const pageInfo = reactive({
  total: 0,
  pageSize: 5,
  pageNum: 1
})
onMounted(() => {
  callPersonApi()
  callVenueApi()
})
const callVenueApi = () => {
  venueApi.select.call().then((res: any) => {
    res.list.forEach((item: any) => {
      options.value.push(item)
    })
  })
}
const callPersonApi = () => {
  let params: any = {}
  if (formData.name.trim() != "") {
    params.name = formData.name
  }
  if (formData.venueId != 0) {
    params.venueId = formData.venueId
  }
  if (formData.phone.trim() != "") {
    params.phone = formData.phone
  }
  params.pageSize = pageInfo.pageSize   //一页多少条的参数
  params.pageNum = pageInfo.pageNum    //你要查询第几页
  personApi.select.call(params).then((res: any) => {
    pageInfo.total = res.total
    tableData.value = res.list
  })
}

const handleDel = (row: any) => {
  ElMessageBox.confirm(
      '确定要删除吗？',
      'Warning',
      {
        confirmButtonText: 'OK',
        cancelButtonText: 'Cancel',
        type: 'warning',
      }
  ).then(() => {
    console.log(row.id)
    personApi.delete.call(row.id).then((res: any) => {
      if (res === 1) {
        callPersonApi()
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
      }
    })
  }).catch(() => {
  })
}

const edit = (row: any) => {
  router.push({name: 'person-edit', query: {id: row.id}})
}
const pageChange = (num: number) => {
  pageInfo.pageNum = num
  callPersonApi()
}

const handleClick = (row: any) => {
  router.push({name: "person-face", query: {id: row.id, venueId: row.venueId}})
}
</script>

<style scoped>

</style>
